<template>
    <div id="app">
        <!--头部确认订单导航-->
        <div class="page_title">
            <router-link to="" @click.native="$router.back()"> < 确认订单 </router-link>
        </div>
        <!--地址-->
        <div id="address">
            <p><img src="../../public/img/location3.png" alt="" width="100%"></p>
            <div class="msg">
                <p>张三三 <span>12345678987</span></p>
                <p>江西省南昌市艾溪湖管理处南昌中兴科技园 <span> > </span></p>
                <p class="tip">收获不便时，可选择暂存服务</p>
            </div>
        </div>
        <!--结算商品-->
        <div class="Goods">
            <!--店铺商品-->
            <div class="item" v-for="(val,index) in arr" :key="index">
                <!--店铺名称部分-->
                <p><input type="checkbox">
                    <span class="iconfont icon-dianpu"></span>{{val.store_name}} >
                </p>
                <!--商品信息部分-->
                <div class="item_content">
                    <!--商品复选框和图片-->
                    <div class="chk_goods">
                        <input type="checkbox" name="chk1">
                        <img :src="val.src" alt="">
                    </div>
                    <!--商品名称，价格，加减，删除，选择尺寸-->
                    <div class="goods_msg">
                        <!--商品名称-->
                        <p>{{val.name}}</p>
                        <!--商品价格，加减，删除-->
                        <div>
                            <span>￥{{val.price}}.00</span>
                            <div class="cul">
                                <button @click="del(index)">-</button>
                                <span>{{val.num}}</span>
                                <button @click="add(index)">+</button>
                            </div>
                            <span class="del iconfont icon-shanchu"></span>
                        </div>
                        <!--选择尺寸-->
                        <p class="sel">
                            <select name="sel" :id="'size'+index">
                                <option value="1">尺寸:6寸</option>
                                <option value="2">尺寸:8寸</option>
                                <option value="3">尺寸:10寸</option>
                                <option value="4">尺寸:12寸</option>
                                <option value="5">尺寸:14寸</option>
                            </select>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!--底部合计部分-->
        <div class="goodsCount">
            <p>共计 <span>0</span>件，</p>
            <p>合计:<span>￥0.0</span></p>
            <router-link to="/Home"><button @click="buy()">提交订单</button></router-link>
        </div>
    </div>
</template>

<script>
    export default {
        name: "account",
        data(){
            return{
                arr:[
                    // {store_name:'青青草原蛋糕店',src:'./img/tejia6.png',goods_name:'抹茶奶油蛋糕',price:'118',num:1},
                    // {store_name:'美洋洋蛋糕店',src:'./img/tejia2.png',goods_name:'草莓巧克力蛋糕',price:'128',num:1},
                ]
            }
        },
        methods:{
            buy(){
                alert("购买成功");
            }
        }
    }
</script>

<style lang="less" scoped>
    /*整个页面设置背景颜色*/
    #app{
        position: absolute;
        top: 0;
        bottom: 0;
        background: #ddd;
    }
    /*标题部分*/
    .page_title{
        height: 60px;
        line-height: 60px;
        background: #C25654;
        padding: 0 25px;
    }
    /*标题部分a链接的样式*/
    .page_title a{
        text-decoration:none ;
        color: white;
    }
    #address{
        display: flex;
        padding: 20px;
        background: white;
        border-radius: 10px;
        margin: 10px;
    }
    /*定位小图标*/
    #address p{
        flex: 1;
    }
    #address p img{
        width: 100%;
        margin-top: 2rem;
    }
    /*收获地址信息*/
    #address .msg{
        flex: 6;
        margin-left: 20px;
    }
    //每个商品盒子
    .Goods .item{
        width: 95%;
        margin:10px auto 0;
        padding: 10px 5px;
        background: white;
        border-radius: 10px;
    }
    //店铺名称部分
      .Goods .item p{
          margin-left:5px ;
      }
    //店铺名称处的小字体图标
      .Goods .item p span{
          margin-left:10px ;
      }
    //商品内容信息
      .Goods .item .item_content{
          display: flex;
          padding: 0 10px;
      }
    .Goods .item .item_content .chk_goods{
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 5px;
    }
    //商品图片
      .Goods .item .item_content .chk_goods img:last-child{
          width: 100%;
          margin-left: 5px;
      }
    //商品信息
      .Goods .item .item_content .goods_msg{
          flex: 3;
          padding-left: 20px;
      }
    /*价格，加减按钮，删除*/
    .Goods .item .item_content .goods_msg>div{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .Goods .item .item_content .goods_msg p:first-child{
        flex: 1;
    }
    //加减部分
      .Goods .item .item_content .goods_msg .cul{
          flex: 3;
          text-align: right;
          /*margin-left: 1rem;*/
      }
    /*删除的阿里字体图标*/
    .Goods .item .item_content .goods_msg .del{
        flex: 1;
        text-align: right;
    }
    .Goods .item .item_content .goods_msg div .cul span{
        display: inline-block;
        width: 35px;
        text-align: center;
    }
    /*选择尺寸*/
    .Goods .item .item_content .goods_msg select{
        border: none;
        outline: none;
        background: white;
        color: #aaa;
    }
    /*加减部分公共样式*/
    .cul button{
        display: inline-block;
        width: 30px;
        padding:3px 8px;
        background: #eee;
        border: 1px solid #eee;
        outline: none;
    }
    .cul button:first-child{
        border-bottom-left-radius: 10px;
        border-top-left-radius: 10px;
    }
    .cul button:last-child{
        border-bottom-right-radius: 10px;
        border-top-right-radius: 10px;
    }
    //加减部分样式 除了最后一个字体图标
      .cul span:not(:last-child){
          padding:3px 8px;
          border-top: 1px solid #eee;
          border-bottom: 1px solid #eee;
      }
      /*底部合计部分*/
    .goodsCount{
        height: 60px;
        line-height: 50px;
        width: 100%;
        position: fixed;
        bottom: 0;
        background: white;
        display: flex;
        justify-content: flex-end;
        padding: 5px 15px;
    }
    .goodsCount p:first-child{
        color: #aaa;
    }
    .goodsCount p:nth-child(2){
        font-size: 18px;
        font-weight: 600;
    }
    .goodsCount p:nth-child(2) span{
        color: red;
    }
    .goodsCount button{
        padding: 0 20px;
        border-radius: 25px;
        border: none;
        outline: none;
        margin-left: 10px;
        background: #ccc;
    }
</style>